<template>
  <div class="login-container">
    <div class="login-form">
      <van-form @submit="onSubmit">
        <h3 class="login-title">HUA 工厂电子表格系统</h3>
        <van-field
          v-model="username"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        >
          <template slot="left-icon">
            <icon-svg icon-class="zhanghao" />
          </template>
        </van-field>
        <van-field
          v-model="password"
          clearable
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          type="password"
        >
          <template slot="left-icon">
            <icon-svg icon-class="mima" />
          </template>
        </van-field>
        <div class="mt-1">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            :loading="isLoading"
            >登 录</van-button
          >
        </div>
        <van-row class="mt-1">
          <van-col span="6" offset="18">
            <span class="text-button__primary" @click="ipSettingVisible = true"
              >ip设置</span
            >
          </van-col>
        </van-row>
      </van-form>
    </div>
    <div class="version">版本号：{{ version }}</div>
    <img
      src="../../public/static/logo.png"
      alt="工厂图标"
      class="login-logo"
      @click="ShowInfo"
    />
    <IPSetting v-model="ipSettingVisible" />
  </div>
</template>

<script>
import { VERSION } from "../config";
import IPSetting from "../components/IPSetting";
import { setProductionLines, setUser } from "../dao/auth";
import { login } from "../api/auth";
import { mapActions } from "vuex";
import { Dialog } from "vant";
import { toast } from "../utils/common";
import { checkUpgrade } from "../utils/upgrade";

export default {
  name: "Login",
  components: {
    IPSetting,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      username: "",
      password: "",
      version: "",
      ipSettingVisible: false,
      isLoading: false,
    };
  },
  mounted() {
    this.version = VERSION;
  },
  methods: {
    ...mapActions(["loadUser", "loadProductionLines", "loadWarehouseIds"]),
    async onSubmit() {
      this.isLoading = true;
      let response = await login(this.username, this.password);
      // console.log(response);
      this.isLoading = false;
      if (response.status === 200) {
        // console.log(response);
        await setUser(response.data.username);
        await setProductionLines(response.data.Line);
        /*  await setProductionLines([
          { Line: "DovePanPacking", WareHouse_Line: "0031" },
          { Line: "PIPS", WareHouse_Line: "0031" },
          { Line: "MD4", WareHouse_Line: "0031" },
          { Line: "MD5", WareHouse_Line: "0031" },
          { Line: "MM2Make", WareHouse_Line: "0031" },
          { Line: "MM2Pack", WareHouse_Line: "0031" },
          { Line: "DovePanPolishing", WareHouse_Line: "0031" },
          { Line: "Pan+PIPS", WareHouse_Line: "0031" },
        ]); */
        //await setWarehouseIds(response.data.Line);
        //this.$store.state.warehouseid = response.data.Line[0].WareHouse_Line;
        //console.log(response.data.WareHouse_Line[0]);
        let user = await this.loadUser();
        let productionLines = await this.loadProductionLines();
        //let warehouseIds = await this.loadWarehouseIds();
        //console.log(this.$store.getters.WarehouseIds);
        if (user === "ok" && productionLines === "ok") {
          this.$router.push("/selectProductionLine");
        }
      } else {
        toast(response.msg);
      }
    },
    ShowInfo() {
      Dialog.confirm({
        title: "loading",
        message: "是否下载最新版本",
      })
        .then(() => {
          window.cordova.getAppVersion
            .getVersionNumber()
            .then(function (version) {
              checkUpgrade(version);
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/less/comm";
@import "../assets/less/button";
.login-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 9rem;
  .login-form {
    width: 80%;
  }
  .van-field {
    margin-bottom: 0.5rem;
  }
  .login-title {
    text-align: center;
    color: blueviolet;
    margin-bottom: 2rem;
  }
  .login-logo {
    position: fixed;
    width: 3rem;
    height: 3rem;
    bottom: 1rem;
    left: 2rem;
  }
  .version {
    position: fixed;
    bottom: 0;
    font-size: 0.8rem;
    right: 0.5rem;
    color: @second-font-color;
  }
}
</style>
